<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { FormProps } from "../utils/types";
import { formRules } from "../utils/rule";
import { changeHttpLink } from "@/utils/test";
import { http } from "@/utils/http";
import { message } from "@/utils/message";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    Name: "",
    tenantOptions: [],
    TenantId: 0,
    DealerId: 0
  })
});
const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

function getRef() {
  return ruleFormRef.value;
}

const emit = defineEmits(["success"]);
defineExpose({ getRef });

// 监听租户选项变化，当有选项且当前值为0时自动选择第一个选项
watch(
  () => newFormInline.value.tenantOptions,
  newOptions => {
    if (
      newOptions &&
      newOptions.length > 0 &&
      newFormInline.value.TenantId === 0
    ) {
      newFormInline.value.TenantId = newOptions[0].Id;
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="分类名称" prop="Name" required>
      <el-input v-model="newFormInline.Name" placeholder="请输入分类名称" />
    </el-form-item>
    <el-form-item label="租户" prop="TenantId" required>
      <el-select v-model="newFormInline.TenantId" placeholder="请选择租户">
        <el-option
          v-for="item in newFormInline.tenantOptions"
          :key="item.Id"
          :label="item.Name"
          :value="item.Id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
